<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>box-shadow</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .demo1 {
        width: 50%;
        margin-left: 25%;
        height: 100px;
        background-color: antiquewhite;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
      }
      .demo1.demo2_1 {
        height: 50px;
        box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.2);
      }
      .demo2_2 .demo1:first-child {
        height: 50px;
        box-shadow: inset 1px 0 #a2a9b6, inset -1px 0 #a2a9b6,
          inset 0 1px #a2a9b6, inset 0 -1px #a2a9b6;
      }
      .demo2_2 .demo1:nth-child(2) {
        height: 50px;
        margin-top: 5px;
        border: 1px solid #a2a9b6;
      }
      .demo1.demo2_3 {
        height: 50px;
        box-shadow: inset 0 0 999px rebeccapurple;
      }

      .demo1.demo3_1 {
        box-shadow: inset 0 0 0 1px #a2a9b6;
        border-radius: 50%;
      }
      .demo1.demo3_2 {
        box-shadow: 0 7px 5px -5px #a2a9b6;
      }

      .demo1.demo4_1 {
        box-shadow: 0 0 0 1px red, 0 0 0 2px orange, 0 0 0 3px yellow,
          0 0 0 4px green, 0 0 0 5px aqua, 0 0 0 6px blue,
          0 0 0 7px rebeccapurple;
      }

      .demo4_2 {
        margin: 20px 40%;

        width: 4px;
        height: 4px;
        border-radius: 100%;
        color: rgba(0, 0, 0, 0.4);
        box-shadow: 0 -10px rgba(0, 0, 0, 0.9), 10px 0px, 0px 10px,
          -10px 0 rgba(0, 0, 0, 0.7), -7px -7px rgba(0, 0, 0, 0.8),
          7px -7px rgba(0, 0, 0, 1), 7px 7px, -7px 7px;
        animation: spin 1s steps(8) infinite;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      .demo4_3 {
        margin: 40px 20%;

        width: 60px;
        height: 60px;
        color: #e91e63;
        background-color: currentColor;
        border-radius: 50%;
        box-shadow: 100px 0px 0 -10px, 40px 0px, 70px 15px, 30px 20px 0 -10px,
          70px -15px, 30px -30px;
      }

      .demo4_4 {
        /* 防止margin合并 */
        border: 1px solid;
        background: #bd7575;
        height: 200px;
      }
      .demo4_4 .demo1 {
        margin-top: 50px;
        border-radius: 66px;
        background: #bd7575;
        box-shadow: 29px 29px 58px #a16363, -29px -29px 58px #d98787;
      }
      .demo4_4 .demo1:active {
        border-radius: 66px;
        background: #bd7575;
        box-shadow: inset 29px 29px 58px #a16363, inset -29px -29px 58px #d98787;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./9-opacity与增强.html">上一篇</a>
      <a href="./11-2d变幻.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>box-shadow</dt>
        <dd>
          <div class="demo1">
            内容
          </div>
        </dd>
        <dd>
          <pre><code class="language-scss">
box-shadow: 
0 6px 12px rgba(0, 0, 0, 0.2); 
// 水平偏移、垂直偏移、模糊大小、颜色</code></pre>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>inset</dt>
        <dd>
          <div class="demo1 demo2_1">
            内容
          </div>
        </dd>
        <dd>
          <h4>
            模拟边框
          </h4>
          <div class="demo2_2">
            <div class="demo1">
              模拟的边框
            </div>
            <div class="demo1">
              真实的边框
            </div>
          </div>
        </dd>
        <dd>
          <h4>
            颜色填充
          </h4>
          <div class="demo1 demo2_3"></div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>第四个参数，扩展半径</dt>
        <dd>
          <h4>
            轮廓模拟
          </h4>
          <div class="demo1 demo3_1">
            在IE下border圆角会出错，所以一般用于模拟大范围颜色的效果
          </div>
          <h4>
            单侧阴影
          </h4>
          <div class="demo1 demo3_2"></div>
        </dd>
        <dd>
          <pre><code class="language-scss">
box-shadow: 0 7px 5px -5px #a2a9b6;</code></pre>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>多阴影特性</dt>
        <h4>
          多边框
        </h4>
        <dd>
          <div class="demo1 demo4_1"></div>
        </dd>
        <dd>
          <h4>
            模拟加载菊花
          </h4>
          <div class="demo4_2"></div>
        </dd>
        <dd>
          <h4>
            云朵效果
          </h4>
          <div class="demo4_3"></div>
        </dd>
        <dd>
          <h4>
            模拟3d点击效果（https://neumorphism.io）
          </h4>
          <div class="demo4_4">
            <div class="demo1"></div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
